<template>
  <div class="blo">
      <div class="head">
          <span class="lf_tle"></span>
          <span :style="tle_sty" class="rgt_btn">{{title}}<em :style="{backgroundColor:clr}"></em></span>
      </div>
      <div class="cont">
        <slot name="default"></slot>
      </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "@vue/runtime-core";

export default defineComponent({
    name:'box',
    props:{
        title:{
            type:String,
            require:true
        },
        clr:String
    },
    setup(props){
        let tle_sty=reactive({
            color:props.clr,
        })
        return {
            tle_sty
        }
    }
})
</script>

<style lang="scss" scoped>
    .blo{
        width:90%;
        margin: 0 auto;
        border-bottom: 1px solid #ddd;
        padding-bottom: 40px;
        .head{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 100px;
            .lf_tle{
                font-size: 14PX;
                color:#333;
                font-weight: 600;
                display: flex;
                align-items: center;
                position: relative;
            }
            .rgt_btn{
                font-size: 16PX;
                padding: 0 10px;
                border-style: solid;
                border-width: 4px;
                border-color: transparent;
                display: flex;
                align-items: center;
                font-weight: 600;
                em{
                    width:6px;
                    height: 40px;
                    display: inline-block;
                    margin-left: 10px;
                }
            }
        }
    }
</style>